import './index.scss'
import { Request, fetchMessageAPI } from '@/apis/message'
import { Form, Input, TextArea, Button, Modal, Toast } from 'antd-mobile'
// import { ExclamationCircleFill } from 'antd-mobile-icons'
import { useState } from 'react'
// import { SwiperRef } from 'antd-mobile/es/components/swiper'
// import { useForm } from './useForm'
// import HomeList from './HomeList'

const getMessage = async (data:Request) => {
    try {
      const res = await fetchMessageAPI(data)
    //   console.log(res);
      if (res.data.code===200) {
        Toast.show({
            icon: 'success',
            content: res.data.msg,
          })
      }
      // setBanners(res.data.data)
    } catch (error) {
      throw new Error('fetch banners error')
    }
  }

const FormButton = () => {
    // 逻辑业务
    // const { res } = useForm()
    const [visible, setVisible] = useState(false)
    // UI 渲染
    const onFinish = (values: any) => {
        // console.log(values)
        getMessage(values)
    }
    return (
        <div className='form-panel'>
            {/* <Button
                block
                onClick={() => {
                    Modal.alert({
                        title: 'Request a Quote',
                        showCloseButton: true,
                        confirmText: 'Cancel',
                        content: (
                        <>
                        <Form
                            onFinish={onFinish}
                            layout='horizontal'
                            className="el-form"
                            footer={
                            <Button block type='submit' color='primary' size='large'>
                                SEND
                            </Button>
                            }
                            >
                                <Form.Item
                                    name='name'
                                    className="el-form-item"
                                    rules={[{ required: true, message: 'Cannot be empty' }]}
                                >
                                    <Input onChange={console.log} placeholder='*Name' />
                                </Form.Item>
                                <Form.Item
                                    name='email'
                                    className="el-form-item"
                                    rules={[{ required: true, message: 'Cannot be empty' }]}
                                >
                                    <Input onChange={console.log} placeholder='*E-mail' />
                                </Form.Item>
                                <Form.Item
                                    name='company'
                                    className="el-form-item"
                                    rules={[{ required: true, message: 'Cannot be empty' }]}
                                >
                                    <Input onChange={console.log} placeholder='*Company' />
                                </Form.Item>
                                <Form.Item
                                    name='phone'
                                    className="el-form-item"
                                    rules={[{ required: true, message: 'Cannot be empty' }]}
                                >
                                    <Input onChange={console.log} placeholder='*Phone(WhatsApp)' />
                                </Form.Item>
                                <Form.Item
                                    name='content'
                                    className="el-form-item"
                                    rules={[{ required: true, message: 'Cannot be empty' }]}
                                >
                                    <TextArea onChange={console.log} rows={3} placeholder='*Message' />
                                </Form.Item>
                            </Form>
                        </>
                        ),

                    })
                }}
            >
                Request a Quote
            </Button> */}
            <Button
                block
                onClick={() => {
                setVisible(true)
                }}
            >
                Request a Quote
            </Button>
            {/* 弹窗 */}
            <Modal
                visible={visible}
                showCloseButton={true}
                // bodyStyle={{ padding: '0' }}
                className='modal-style'
                onAction={(action) => {
                if (action.key === 'confirm') {
                    // console.log(form.getFieldsValue())
                }
                }}
                title='Request a Quote'
                closeOnAction
                onClose={() => {
                  setVisible(false)
                }}
                content={
                <>
                    <Form
                        // form={form}
                        onFinish={onFinish}
                        layout='horizontal'
                        className="el-form"
                        footer={
                        <Button block type='submit' color='primary' size='large'>
                            SEND
                        </Button>
                        }
                    >
                        {/* <Form.Header>水平布局表单</Form.Header> */}
                        <Form.Item
                            name='name'
                            className="el-form-item"
                            rules={[{ required: true, message: 'Cannot be empty' }]}
                        >
                            <Input onChange={console.log} placeholder='*Name' />
                        </Form.Item>
                        <Form.Item
                            name='email'
                            className="el-form-item"
                            rules={[{ required: true, message: 'Cannot be empty' }]}
                        >
                            <Input onChange={console.log} placeholder='*E-mail' />
                        </Form.Item>
                        <Form.Item
                            name='company'
                            className="el-form-item"
                            rules={[{ required: true, message: 'Cannot be empty' }]}
                        >
                            <Input onChange={console.log} placeholder='*Company' />
                        </Form.Item>
                        <Form.Item
                            name='phone'
                            className="el-form-item"
                            rules={[{ required: true, message: 'Cannot be empty' }]}
                        >
                            <Input onChange={console.log} placeholder='*Phone(WhatsApp)' />
                        </Form.Item>
                        <Form.Item
                            name='content'
                            className="el-form-item"
                            rules={[{ required: true, message: 'Cannot be empty' }]}
                        >
                            <TextArea onChange={console.log} rows={5} placeholder='*Message' />
                        </Form.Item>
                    </Form>
                </>
                }
                actions={[
                    {
                      key: 'confirm',
                      text: 'Cancel',
                    },
                  ]}
            />
        </div>
    )
  }
  
  export default FormButton
  